import { defineComponent, ref, Ref } from 'vue'
import MonacoEditor from './components/MonacoEditor'
import { createUseStyles } from 'vue-jss'
function toJson(data:any) {
  return JSON.stringify(data, null, 2) // 换行， tab
}
const schema = {
  type: 'string'
}
const useStyle = createUseStyles({
  editor: {
    minHeight: 400,
  }
})
const App = defineComponent({
  setup() {
    const schemaRef: Ref<any> = ref(schema)
    const handleCodeChange = (code:string)=>{
      let schema:any
      try {
        schema = JSON.parse(code)
      } catch(err){
        console.log(err)
      }
      schemaRef.value = schema
    }

    const classesRef = useStyle()

    return () => {
      const classes = classesRef.value
      const code = toJson(schemaRef.value)
      return (<div>
          <MonacoEditor
            code={code}
            onChange={handleCodeChange}
            title="Schema"
            class={classes.editor}
          />
      </div>
      )
    }
  },
})

export default App